import React, { memo } from 'react';
import { useTitle } from '../../../js';
import { Image, Divider, Tag, Typography, Spin } from 'antd';
import style from './index.module.scss';
import { baseURL } from '../../../config';
import { useImgWidth, splitTags } from './util';
import useRoom from './useRoom';

const { Title, Text } = Typography;

interface IPros {}
const defaultProps = {};
const RoomComponent: React.FC<IPros> = (props) => {
	const width = useImgWidth(); // 获取图片的宽度
	const { loading, room, errorComponent } = useRoom(); // 获取房间数据
	useTitle(room !== undefined ? room.name : ''); // 修改标题

	if (errorComponent) {
		return <>{errorComponent}</>;
	}
	return (
		<div className={style.container}>
			{loading || !room ? (
				<Spin size='large' className={style.loading}></Spin>
			) : (
				<>
					<div className={style.img}>
						<Image
							width={width}
							src={`${baseURL}/images/${room.url}.jpg`}
							fallback=''
						/>
					</div>
					<div className={style.header}>
						<Title level={5}>{room?.name}</Title>
						<Text className={style.price} type='danger' strong>
							{room?.price}元/月
						</Text>
					</div>
					<Divider />
					<div className={style.infoContainer}>
						<div>
							<Text type='secondary'>户型</Text>
							<Title level={4} type='danger'>
								{room.housetype}
							</Title>
						</div>
						<div>
							<Text type='secondary'>面积</Text>
							<Title level={4} type='danger'>
								{room.area}m<sup>2</sup>
							</Title>
						</div>
						<div>
							<Text type='secondary'>朝向</Text>
							<Title level={4} type='danger'>
								{room.dir}
							</Title>
						</div>
					</div>
					<Divider />
					<div className={style.tags}>
						{splitTags(room.tags as string).map((tag, index) => (
							<Tag key={index} color='blue'>
								{tag}
							</Tag>
						))}
					</div>
				</>
			)}
		</div>
	);
};
RoomComponent.defaultProps = defaultProps;
export default memo(RoomComponent);
